
<template>
    <div class="paper">
        <header>
            <h1>你已经完成<span class="number">{{que_is_count}}/{{que_count}}</span>套测试</h1>
            <div class="user_age">
                <div class="age_img"><img v-if="(sex==1)" src="static/images/sex_boy.png" alt=""><img v-if="(sex==2)" src="static/images/sex_girl.png" alt=""></div>
                <div class="age_text">孩子年龄{{age}}个月</div>
                <div class="age_save" @click="show_alert">修改</div>
                <div class="clear"></div>
            </div>
        </header>
        <div class="hr"></div>
        <section class="paper_list">
            <ul>
                <li class="paper_content" v-for="item in que_list"
                    v-bind:is_question="item.is_question"
                    v-bind:qu_id="item.qu_id"
                    @click="topic"
                    >
                    <div class="paper_img">
                        <img src="static/images/paper_girl.png" v-if="(item.is_question==1)" alt="">
                        <img src="static/images/paper_no.png" v-if="(item.is_question!=1)" alt="">
                    </div>
                    <div class="paper_content">
                        <h4>{{item.qu_title}}</h4>
                        <p>{{item.qu_description}}</p>
                        <p>建议{{item.qu_startage}}-{{item.qu_endage}}</p>
                    </div>
                    <div class="paper_right">
                        <img src="static/images/paper_right.png" alt="">
                    </div>
                    <div class="clear"></div>
                </li>
            </ul>
        </section>
        <section class="alert">
            <div class="alert_content">
                <h5>孩子性别</h5>
                <div class="sex_select" @click="cut_sex">男孩</div>
                <h5>孩子生日</h5>
                <input class="birthday" disabled id="beginTime" value="">
                <button id='demo2' data-options='{"type":"date","beginYear":1990,"endYear":2017}' class="btn mui-btn mui-btn-block">选择日期 ...</button>
                <div class="but">
                    <div class="confirm_btn" @click="info_save">确定</div>
                    <div class="undo_btn" @click="hide_alert">取消</div>
                    <div class="clear"></div>
                </div>
            </div>
            <div id="datePlugin"></div>
        </section>
    </div>
</template>
<script>
    export default {
        name: 'paper',
        data () {
            return {
                sex: 1,
                age: 0,
                que_list : [],
                que_count : 0,
                que_is_count : 0,
            }
        },
        mounted () {
            sessionStorage.setItem("is_topic",2)
            setTimeout( e => {
                //时间选择器
                (function($) {
                    $.init();
                    var result = $('#beginTime')[0];
                    var btns = $('.btn');
                    btns.each(function(i, btn) {
                        btn.addEventListener('tap', function() {
                            var optionsJson = this.getAttribute('data-options') || '{}';
                            var options = JSON.parse(optionsJson);
                            var id = this.getAttribute('id');
                            var picker = new $.DtPicker(options);
                            picker.show(function(rs) {
                                result.value = rs.text;
                                picker.dispose();
                            });
                        }, false);
                    });
                })(mui);

                $(document).on('touchstart','.mui-backdrop',function (){
                    $('.mui-dtpicker').css('bottom','-150px')
                })

                $(document).on('touchstart','.mui-dtpicker-header>button',function (){
                    $('.mui-dtpicker').css('bottom','-150px')
                })

                //如果已经选过孩子年龄，就直接获取数据
                if( localStorage.getItem('age') !== null )
                {
                    this.age = localStorage.getItem('age')

                    var openid = localStorage.getItem('openid')
                    //请求获取数据
                    var url = this._API_ + "index?age="+this.age+"&openid="+openid
                    this.$http.get(url).then( e => {
                        this.que_count = e.data.length
                        this.que_list = e.data
                        this.que_is_count = 0
                        for(var i in e.data){
                            if(e.data[i].is_question==1){
                                this.que_is_count++
                            }
                        }
                    })

                    //如果年龄大于12个月
                    if( this.age > 11 ) {
                        var m = this.age % 12
                        var y = parseInt( this.age / 12 )
                        this.age = y + '年' + m
                    }

                    $('.alert').hide()

                }
                else
                {
                    console.log(localStorage.getItem('age'))
                }
            },100)

        },
        components : {

        },
        methods : {
            show_alert () {
                $('.alert').show();
            },
            hide_alert () {
                $('.alert').hide();
            },
            info_save () {
                //获取孩子年龄
                var birth = $('#beginTime').val().replace(/-/g,'')
                if( birth == '' ){
                    alert('请先选择孩子年龄')
                    return  false;
                }
                var timestamp = this.getNowFormatDate().replace(/-/g,'')

                this.age = this.getMonthNumber(birth,timestamp)

                var openid = localStorage.getItem('openid')

                //存储到本地
                localStorage.setItem('age',this.age)

                //请求获取数据
                var url = this._API_ + "index?age="+this.age+"&openid="+openid
                this.$http.get(url).then( e => {
                    this.que_count = e.data.length
                    this.que_list = e.data
                    this.que_is_count = 0
                    for(var i in e.data){
                        if(e.data[i].is_question==1){
                            this.que_is_count++
                        }
                    }
                })

                //如果年龄大于12个月
                if( this.age > 11 ) {
                    var m = this.age % 12
                    var y = parseInt( this.age / 12 )
                    this.age = y + '年' + m
                }

                $('.alert').hide()
            },
            age_sex () {

            },
            cut_sex () {
                if( this.sex == 1 ) {
                    this.sex = 2
                    $('.sex_select').text('女孩')
                } else {
                    this.sex = 1
                    $('.sex_select').text('男孩')
                }
            },
            topic (e) {
                var that = $(e.currentTarget)
                var qu_id = $(e.currentTarget).attr('qu_id')
                if(that.attr('is_question') == 1) {
                    var openid = localStorage.getItem('openid')

                    var url = this._API_ + "answer_id?openid=" + openid + "&qu_id=" + qu_id
                    this.$http.get(url).then( e => {
                        if( e.data > 0 )
                        {
                            sessionStorage.setItem("is_topic",1)
                            sessionStorage.setItem( "an_id" , e.data )
                            location.href = "#Result"
                        }
                        else if( e.data == 'no' )
                        {
                            alert('数据错误')
                        }
                    })
//                    location.href = "Result"
//                    return false;




                }
                sessionStorage.setItem('qu_id',qu_id)
                sessionStorage.setItem("is_topic",2)
                location.href = "#Topic"
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


    .alert{
        position: fixed;
        top:0px;
        width:750px;
        height:1406px;
        background:rgba(0,0,0,0.3);
    }
    .alert_content{
        width:454px;
        height:262px;
        background:#fff;
        margin-top:410px;
        margin-left:147px;
        overflow: hidden;
        position: relative;
        transform: scale(1.3);
    }
    .alert_content h5{
        font-size:2rem;
        color:#f05c78;
        text-align: center;
        line-height:2rem;
        margin-top:26px;
    }
    .sex_select,.birthday{
        padding:0px;
        margin:0px;
        border:0px;
        display:block;
        height:30px;
        width:180px;
        border-bottom:1px solid #393939;
        margin:0px auto;
        text-align: center;
        line-height:30px;
        font-size:1.8rem;
        color:#393939
    }
    .but{
        position: absolute;
        bottom:0px;
    }
    .but>div:not(.clear){
        float: left;
        width:227px;
        height:67px;
        font-size:3rem;
        line-height:67px;
        text-align: center;
    }
    .confirm_btn{
        color:#fff;
        background:#f05c78;
    }
    .undo_btn{
        background: #f4f2f2;
        color: #919191;
    }
    .paper_content h4{
        font-size:3rem;
        color:#232323;
        line-height:3rem;
        margin-top:35px;
    }
    .paper_content p{
        font-size:2.6rem;
        color:#b2b2b2;
        line-height:2.6rem;
    }
    header{
        height:250px;
        background:#fff;
        overflow: hidden;
    }
    h1{
        font-size: 3.6rem;
        color:#000;
        text-align: center;
        margin-top:58px;
        margin-bottom:60px;
        word-spacing:8px;
        letter-spacing: 5px;
    }
    .number{
        color:#22b0e7;
    }
    .user_age{
        width:355px;
        margin:0px auto;
    }
    .user_age>div:not(.clear){
        float: left;
    }
    .age_text{
        font-size:2.6rem;
        width:250px;
        text-align: center;
    }
    .age_save{
        font-size:2.6rem;
        color:#464646;
        float: right!important;
        text-decoration: underline;
    }
    .hr{
        height:15px;
        background:#f4f1f1;
        -moz-box-shadow:0px 0px 3px #999 inset;               /* For Firefox3.6+ */
        -webkit-box-shadow:0px 0px 3px #999 inset;            /* For Chrome5+, Safari5+ */
        box-shadow:0px 0px 3px #999 inset;                    /* For Latest Opera */
    }
    .paper_content>div:not(.clear){
        float: left;
    }
    .paper_list li{
        height:168px;
        width:750px;
        border-bottom:1px solid #e3e3e3;
    }
    .paper_content{
        width:492px;
        height:168px;
    }
    .paper_right{
        width:112px;
        height:168px;
    }
    .paper_right img{
        margin-left:50px;
        margin-top:75px;
    }
    .paper_img{
        width:146px;
    }
    .paper_img img{
        float: left;
        margin-top:37px;
        margin-left:40px;
    }
    #demo2{
        opacity:0;
        width:180px;
        height:32px;
        position: relative;
        top:-33px;
        margin:0px auto;
        padding:0px;
        display:block;
        border:0px;
    }
@import '../../static/css/common.css'
</style>
